<template>
    <div style="display: flex; align-items:center; flex-direction: column;">
        <p class="box">编辑品牌</p>
        <div>
            <el-form :model="addBrand" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="品牌编码">
                    <el-input v-model="addBrand.id" :disabled="true" style="width:260px" placeholder="自动取得当前最大编码+1"></el-input>
                </el-form-item>
                <el-form-item label="中文名" prop="brandcname">
                    <el-input v-model="addBrand.brandcname" style="width:260px"></el-input>
                </el-form-item>
                <el-form-item label="英文名" prop="brandename">
                    <el-input v-model="addBrand.brandename" style="width:260px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="editBrandList()" style="width:160px">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<style>
.box{
    font-size: 20px;
    margin-bottom: 16px;
    font-weight: 600;
    color: rgb(133,206,97);
}
</style>
<script>
// 导入API
import { AddBrand, BrandList,EditBrand } from '@/api/brand';
export default {
    name:"brandEdit",
    data() {
        return {
            addBrand:{ },
            rules: {
                brandcname: [
                    { required: true, message: '请输入中文名', trigger: 'blur' },
                ],
                brandename: [
                    { required: true, message: '请输入英文名', trigger: 'blur' },
                ],
            },
        }
    },
    created(){
        // 获取品牌信息
        // $route.params.id 传入的品牌id
        BrandList({id:this.$route.params.id})
        .then(res=>{
            if(res&&res.data&&res.data.code==0){
                // 更新brandList数据
                this.addBrand = res.data.data[0];
            }
        })
    },
    methods:{
        // 编辑员工
        editBrandList(){
            EditBrand(this.addBrand)
            .then(res=>{
                if(res.data&&res.data.code == 0){
                    this.$message({
                            message: "编辑成功,2秒后自动返回",
                            type: "success"
                        })
                        setTimeout(()=>{
                            this.$router.back()
                        },2000)
                }
            })
        },
        addBrandList(){
            AddBrand(this.addBrand)
            .then(res =>{
                if(res.data&&res.data.code == 0){
                    this.$message({
                            message: "添加成功",
                            type: "success"
                        })
                        this.addBrand = "";
                }else{
                    this.$message({
                            message: "添加失败",
                            type: "warning"
                        })
                }
            })
        }
    }
}
</script>